<template>
  <div class="add_package_container">
    <div class="top_title_container">
      <span class="indicator"></span>
      <span class="text">套餐筛选</span>
    </div>
    <div class="content_container">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="left_container">
            <div class="grey_title_container">
              <span class="text">套餐分类</span>
            </div>
            <div class="tree_container">
              <el-input
                size="mini"
                v-model="filterText"
                placeholder="请输入查询内容">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <el-tree
                ref="cateTree"
                @node-click="cateClick"
                :filter-node-method="filterNode"
                :props="packageTreeProps"
                :load="getPackageCate"
                style="margin-top: 12px;"
                accordion
                lazy>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="right_container">
            <div class="search_container">
              <div class="grey_title_container">
                <span style="margin-right: 6px;" class="text"><i class="el-icon-search"></i></span>
                <span class="text">筛选查询</span>
              </div>
              <div class="search_content_container form_container">
                <el-row :gutter="10">
                  <el-col :span="3" class="item">
                    <div class="text_container">
                      <span class="text">名称:</span>
                    </div>
                    <el-input size="mini" v-model="searchOptions.packageName"></el-input>
                  </el-col>
                  <el-col :span="3" class="item">
                    <div class="text_container">
                      <span class="text">编码:</span>
                    </div>
                    <el-input size="mini" v-model="searchOptions.packageCode"></el-input>
                  </el-col>
                  <el-col :span="6" class="item">
                    <div class="text_container">
                      <span class="text">价格:</span>
                    </div>
                    <el-input size="mini" v-model="searchOptions.priceFrom"></el-input>
                    <span style="color: #666666;font-size: 11px;margin-left: 7px; margin-right: 7px;">至</span>
                    <el-input size="mini" v-model="searchOptions.priceTo"></el-input>
                  </el-col>
                  <el-col :span="4" class="item">
                    <div class="text_container">
                      <span class="text">是否上架:</span>
                    </div>
                    <el-select v-model="searchOptions.packageState" value="1" placeholder="请选择" size="mini">
                      <el-option
                        v-for="item in packageStateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4" class="item">
                    <div class="text_container">
                      <span class="text">类型:</span>
                    </div>
                    <el-select value="1" placeholder="请选择" size="mini">
                      <el-option
                        value="1">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4" class="item">
                    <el-button type="primary" size="mini" @click="getPackages">搜索</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="all_package_container">
              <div class="grey_title_container border">
                <span class="indicator"></span>
                <span class="text">待选套餐</span>
              </div>
              <div class="table_container">
                <el-table
                  ref="allPackagesTable"
                  :data="packages"
                  v-loading="isLoading"
                  @select="packageSelect"
                  @select-all="packageSelectAll"
                  border>
                  <el-table-column
                    type="selection"
                    width="35"/>
                  <el-table-column
                    label="名称"
                    align="center"
                    prop="pkgname"/>
                  <el-table-column
                    label="编码"
                    align="center"
                    prop="pkgcode"/>
                  <el-table-column
                    label="价格"
                    align="center"
                    prop="price"/>
                  <el-table-column
                    label="分类"
                    align="center"/>
                  <el-table-column
                    label="类型"
                    align="center"/>
                  <el-table-column
                    label="是否上架"
                    align="center"/>
                </el-table>
                <div class="pagination">
                  <el-pagination
                    @current-change="pageChange"
                    :total="total"
                    :page-size="10">
                  </el-pagination>
                </div>
              </div>
            </div>
            <div class="selected_package_container">
              <div class="grey_title_container">
                <span class="indicator"></span>
                <span class="text">已选套餐</span>
              </div>
              <div class="table_container">
                <el-table
                  ref="selectedPackagesTable"
                  @select="selectedPackagesSelect"
                  @select-all="selectedPackagesSelectAll"
                  :data="selectedPackages"
                  border>
                  <el-table-column
                    type="selection"
                    width="35"/>
                  <el-table-column
                    label="名称"
                    align="center"
                    prop="pkgname"/>
                  <el-table-column
                    label="编码"
                    align="center"
                    prop="pkgcode"/>
                  <el-table-column
                    label="价格"
                    align="center"
                    prop="price"/>
                  <el-table-column
                    label="分类"
                    align="center"/>
                  <el-table-column
                    label="类型"
                    align="center"/>
                  <el-table-column
                    label="是否上架"
                    align="center"/>
                </el-table>
              </div>
            </div>
            <div class="operate_container">
              <el-button type="primary" style="padding-left: 44px; padding-right: 44px; margin-right: 26px;"
                         @click="submit">提交
              </el-button>
              <el-button style="padding-left: 44px; padding-right: 44px;" @click="cancel">取消</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch} from 'vue-property-decorator'

  @Component
  export default class AddPackage extends Vue {
    packageTreeProps = {
      id: 'pkgtypeid',
      label: 'pkgtypename'
    };
    filterText = '';
    packageStateOptions = [{value: '1', label: '上架'}, {value: '2', label: '下架'}];
    searchOptions = {
      selectedCate: '',
      packageName: '',
      packageCode: '',
      priceFrom: '',
      priceTo: '',
      packageState: '',
      currentPage: 1,
    };
    isLoading = false;
    packages = [];
    total = 0;
    preSelectedCount = 0;
    selectedPackages = [];

    created() {
      this.selectedPackages = this.selectedPackages.concat(this.$store.state.ConsumerBilling.selectedPackages);
      this.getPackages();
    }

    @Watch('filterText')
    onFilterTextChange() {
      this.$refs.cateTree.filter(this.filterText);
    }

    /**
     * 获取左边分类数据
     * @param node
     * @param resolve
     */
    getPackageCate(node, resolve) {
      let parentId = '';
      if (node.level === 0) {
        parentId = null;
      } else {
        parentId = node.data.pkgtypeid;
      }
      this.$ajax({
        method: 'get',
        url: '/fin/package/cateList.do',
        params: {
          parentId: parentId
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          resolve(resp.data.data);
        }
      }, error => {
        this.$notify.showError('获取数据异常');
      });
    }

    /**
     * 获取产品列表
     */
    getPackages() {
      this.isLoading = true;
      this.$ajax({
        method: 'get',
        url: '/fin/package/findPackagePage.do',
        params: {
          packageName: this.searchOptions.packageName,
          minPackagePrice: this.searchOptions.priceFrom,
          maxPackagePrice: this.searchOptions.priceTo,
          pkgCode: this.searchOptions.packageCode,
          currentPage: this.searchOptions.currentPage
        }
      }).then(resp => {
        this.isLoading = false;
        this.preSelectedCount = 0;
        if (resp.data.code === 200) {
          this.packages = resp.data.data.list;
          this.total = resp.data.data.count;
          setTimeout(() => {
            for (let _package of this.packages) {
              for (let selectedPackage of this.selectedPackages) {
                if (_package.pkgid === selectedPackage.pkgid) {
                  this.preSelectedCount += 1;
                  this.$refs.allPackagesTable.toggleRowSelection(_package, true);
                  break;
                }
              }
            }
          }, 100);
          this.setSelectedPackagesChecked();
        } else {
          this.$notify.showWarning('获取套餐异常');
        }
      }, error => {
        this.isLoading = false;
        this.$notify.showWarning('获取套餐异常');
      });
    }

    /**
     * 过滤左边树
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.pkgtypename.indexOf(value) !== -1;
    }

    cateClick(data, node) {
      this.searchOptions.selectedCate = data.pkgid;
      this.searchOptions.currentPage = 1;
      this.getPackages();
    }

    /**
     * 分页
     * @param page
     */
    pageChange(page) {
      this.searchOptions.currentPage = page;
      this.getPackages();
    }

    /**
     * 所有套餐点击checkbox
     * @param selection
     * @param row
     */
    packageSelect(selection, row) {
      if (selection.length > this.preSelectedCount) {
        this.addSelectedPackage(row);
        this.setSelectedPackagesChecked();
      } else {
        this.removeSelectedPackage(row);
        this.setSelectedPackagesChecked();
      }
      this.preSelectedCount = selection.length;
    }

    /**
     * 所有套餐点击全选
     */
    packageSelectAll(packages) {
      if (packages.length === 0) {
        this.removeSelectedPackages(this.packages);
        this.setSelectedPackagesChecked();
      } else {
        this.addSelectedPackages(packages);
        this.setSelectedPackagesChecked();
      }
      this.preSelectedCount = packages.length;
    }

    /**
     * 已选商品手动点击checkbox
     */
    selectedPackagesSelect(packages, row) {
      this.handleSelectedPackageSelect(packages);
    }

    /**
     * 已选套餐点击全选
     */
    selectedPackagesSelectAll(packages) {
      this.handleSelectedPackageSelect(packages);
    }

    /**
     *  已选中套餐手动勾选checkbox后的处理
     */
    handleSelectedPackageSelect(packages) {
      for (let _package of this.selectedPackages) {
        let hasMatch = false;
        for (let selectedPackage of packages) {
          if (selectedPackage.pkgid === _package.pkgid) {
            hasMatch = true;
            _package.isChecked = true;
            break;
          }
        }
        if (!hasMatch) {
          _package.isChecked = false;
        }
      }
    }

    /**
     * 设置已选套餐的选中状态
     */
    setSelectedPackagesChecked() {
      setTimeout(() => {
        for (let selectedPackage of this.selectedPackages) {
          if (selectedPackage.isChecked) {
            this.$refs.selectedPackagesTable.toggleRowSelection(selectedPackage, true);
          } else {
            this.$refs.selectedPackagesTable.toggleRowSelection(selectedPackage, false);
          }
        }
      }, 100);
    }

    getYesOrNo(option) {
      if (option === 1) {
        return '是';
      } else {
        return '否';
      }
    }

    /**
     * 保存已选套餐至Vuex并回退至上一界面
     */
    submit() {
      this.filterChecked();
      if (this.selectedPackages.length === 0) {
        this.$notify.showWarning('请选择要添加的套餐');
        return;
      }
      this.$store.commit('setSelectedPackages', this.selectedPackages);
      this.$router.go(-1);
    }

    /**
     * 直接取消
     */
    cancel() {
      this.$router.go(-1);
    }

    /**
     *  向已选商品中添加套餐
     */
    addSelectedPackage(_package) {
      for (let selectedPackage of this.selectedPackages) {
        if (selectedPackage.pkgid === _package.pkgid) {
          return;
        }
      }
      _package.isChecked = true;
      this.selectedPackages.push(_package);
    }

    /**
     * 批量向已选套餐中添加
     */
    addSelectedPackages(packages) {
      packages = packages.filter(_package => {
        for (let selectedPackage of this.selectedPackages) {
          if (_package.pkgid === selectedPackage.pkgid) {
            return false;
          }
        }
        return true;
      });
      for (let _package of packages) {
        if (_package.isChecked === undefined || _package.isChecked === null) {
          _package.isChecked = true;
        }
      }
      this.selectedPackages = this.selectedPackages.concat(packages);
    }

    /**
     * 从已选套餐中移除套餐
     */
    removeSelectedPackage(_package) {
      this.selectedPackages = this.selectedPackages.filter(selectedPackage => {
        return selectedPackage.pkgid !== _package.pkgid;
      });
    }

    /**
     * 批量从已选套餐中移除
     */
    removeSelectedPackages(packages) {
      this.selectedPackages = this.selectedPackages.filter(selectedPackage => {
        for (let _package of packages) {
          if (_package.pkgid === selectedPackage.pkgid) {
            return false;
          }
        }
        return true;
      });
    }

    /**
     * 筛选出已选套餐中，checkbox选中的部分
     */
    filterChecked() {
      this.selectedPackages = this.selectedPackages.filter(selectedPackage => {
        return selectedPackage.isChecked;
      });
    }
  }
</script>

<style scoped>
  .search_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .search_content_container {
    padding: 15px 10px;
  }

  .operate_container {
    text-align: center;
    margin-top: 32px;
  }

  .left_container {
    border: 1px solid #f0f0f0;
  }

  .tree_container {
    padding: 12px;
  }

  .pagination {
    text-align: center;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }
</style>
